<template>
  <div class="article-manager">
    <div class="i-layout-page-header">
      <div class="i-layout-page-header">
        <!-- <span class="ivu-page-header-title">排班管理</span> -->
        <div>
          <Tabs v-model="currentTab" @on-click="changeTab">
            <TabPane
              :label="item.label"
              :name="item.value.toString()"
              v-for="(item, index) in headerList"
              :key="index"
            />
          </Tabs>
        </div>
      </div>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt fromBox" v-if="currentIndex==0">
      <div class="header">
		  <div class="left">
			  <Button class="button" @click="handleSubmit(0)">本周</Button>
			  <Button class="button"  @click="handleSubmit(1)">上周</Button>
			  <Button class="button"  @click="handleSubmit(2)">下周</Button>
			  <!-- <Select class="select" placeholder="请选择" element-id="contact_id" clearable>
					<Option >所有科室</Option>
			  </Select> -->
		  </div>
		  <div class="right">
			  <Button  @click="copySubmit()">复制上周</Button>
		  </div>
	  </div><!-- header end -->
	  <div class="head">所有科室 {{start_date}} 至 {{end_date}}</div>
	  <div class="container"> 
		  <table cellspacing="0" v-for="item in datas">
			  <thead>
				  <tr>
					  <td colspan="9">{{item.name}}</td>
				  </tr>
			  </thead>
			  <tbody>
				  <tr class="head">
					  <td>人员</td>
					  <td>值班类型</td>
					  <template v-for="head in header" >
						  <td v-if="head.status == 1" class="hand" @click="addSchedule(head.date,item.id)">
							  <div class="week">
								  <div class="left">
									  <div class="week_name">{{head.title}}</div>
									  <div class="week_day">{{head.date}}</div>
								  </div>
								  <div class="right">
									  <span class="add" v-if="head.status != 0">+</span>
								  </div>
							  </div>
						  </td>
						  <td v-else class="hand-no">
							  <div class="week">
								  <div class="left">
									  <div class="week_name">{{head.title}}</div>
									  <div class="week_day">{{head.date}}</div>
								  </div>
								  <div class="right">
									  
								  </div>
							  </div>
						  </td>
					  </template>
				  </tr>
				  <template v-for="doctor in item.doctors">
					  <tr>
						  <td rowspan="2">{{doctor.real_name}}</td>
						  <td>上午</td>
						  <template v-for="am in doctor.new_ams">
							  <template v-if="am.id > 0">
								  <td  @click="editData(am.id,am.sch_id)" class="hand">
									{{am.num}}
								  </td>
							  </template>
							  <template v-else>
								  <td>
								  </td>
							  </template>
						  </template>
					  </tr>
					  <tr>
						  <td>下午</td>
						  <template v-for="pm in doctor.new_pms">
							  <template v-if="pm.id > 0">
								  <td  @click="editData(pm.id,pm.sch_id)" class="hand">
									{{pm.num}}
								  </td>
							  </template>
							  <template v-else>
								  <td>
								  </td>
							  </template>
						  </template>
					  </tr>
				  </template>
				  
			  </tbody>
		  </table>
	  </div><!-- container end -->
    </Card><!-- 排班设置 -->
	
	<Card :bordered="false" dis-hover class="ivu-mt fromBox" v-else>
		22
	</Card><!-- 排班总览 -->
    <menus-form
      :formValidate="formValidate"
      :titleFrom="titleFrom"
      @getList="getList"
      @selectRule="selectRule"
      ref="menusForm"
      @clearFrom="clearFrom"
    ></menus-form>
  </div>
</template>

<script>
import formCreate from '@form-create/iview';
import request from '@/libs/request';
import { ListUserFinishedApi} from '@/api/register';
import { ListApi} from '@/api/mehistory';
import menusForm from './components/menusForm';
import { ListScheduleApi,GetApi} from '@/api/schedule';

export default {
  name: 'setting_setSystem',
  components: { menusForm,formCreate: formCreate.$form() },
  data() {
    return {
      currentTab: '',
      headerList: [{
		  'label':'排班设置',
		  'value':0
	  }],
	  // headerList: [{
	  // 		  'label':'排班设置',
	  // 		  'value':0
	  // },{
	  // 		  'label':'排班总览',
	  // 		  'value':1
	  // }],
	  currentIndex:0,
      formValidate: {},
	  titleFrom:'',
	  datas:[],
	  header:[],
	  start_date:'',
	  end_date:'',
	  type:0
    };
  },
  created() {
    // this.getAllData();
	// this.loadUserCheckList();
	this.getList();
  },
  watch: {
    $route(to, from) {
      this.headerChildrenList = [];
      this.getAllData();
    },
    childrenId() {
      this.getFrom();
    },
  },
  methods: {
	addSchedule(sche_time,ks_id){
		this.formValidate = {
				  pm:1,
				  am:1,
				  type:0,
				  sche_time:sche_time,
				  ks_id:ks_id,
				  am_start:'08:00',
				  am_end:'12:00',
				  am_total:1,
				  am_online:0,
				  pm_start:'13:00',
				  pm_end:'21:00',
				  pm_total:1,
				  pm_online:0
		};
		this.$refs.menusForm.modals = true;
		this.$refs.menusForm.valids = false;
		// this.formValidate = Object.assign(this.$data, this.$options.formValidate());
		this.titleFrom = '排班';
	},
	editData(id,sch_id){
		
		let that = this;
		this.loading = true;
		GetApi(sch_id).then(async (res) => {
			that.showModal(res.data);
		}).catch((res) => {
		    this.$Message.error(res.msg);
		});
		
		
	},
	showModal(row){
		let that = this;
		that.formValidate = {
			id:row.id,
			sche_time:row.sche_time,
			ks_id:row.ks_id,
			type:row.type,
			sche_type:row.sche_type,
			doc_id:row.doc_id,
			room_id:row.room_id,
			amount_id:row.amount_id,
			address:row.address,
		};
		if(row.items && row.items.length > 0){
			row.items.forEach(function(item,index,array) {
				console.info(231)
				if(item['type'] == 0){
					that.formValidate['am_id'] = item['id'];
					that.formValidate['am'] = 1;
					that.formValidate['am_start'] = item['start_time'];
					that.formValidate['am_end'] = item['end_time'];
					that.formValidate['am_room_id'] = item['room_id'];
					that.formValidate['am_total'] = item['total'];
					that.formValidate['am_online'] = item['online'];
				}else{
					that.formValidate['pm_id'] = item['id'];
					that.formValidate['pm'] = 1;
					that.formValidate['pm_start'] = item['start_time'];
					that.formValidate['pm_end'] = item['end_time'];
					that.formValidate['pm_room_id'] = item['room_id'];
					that.formValidate['pm_total'] = item['total'];
					that.formValidate['pm_online'] = item['online'];
				}
			});
			
		}
		that.$refs.menusForm.modals = true;
		that.$refs.menusForm.valids = false;
		that.titleFrom = '排班';
	},
	//复制上周
	copySubmit(){
		let that = this;
		this.loading = true;
		
		let delfromData = {
		  title: '复制上周',
		  url: `/schedule/copy`,
		  method: 'GET',
		  ids: '',
		};
		this.$modalSure(delfromData)
		  .then((res) => {
		    this.$Message.success(res.msg);
		    this.getList();
		  })
		  .catch((res) => {
		    this.$Message.error(res.msg);
		  });
	},
	selectRule(data) {
		
	},
    // 清除表单数据
    clearFrom() {
      this.formValidate = Object.assign({}, this.$options.data().formValidate);
    },
	handleSubmit(type){
		this.type = type;
		this.getList();
	},
	getList(){
		console.info('刷新')
		let that = this;
		this.loading = true;
		ListScheduleApi({
			type:this.type,
			start:this.start_date,
			end:this.end_date
		}).then(async (res) => {
			let datas = res.data.departs;
			that.header = res.data.header;
			that.start_date = res.data.start_date;
			that.end_date = res.data.end_date;
			datas = datas.map(function(data,index){
				let doctorss = data.doctors;
				doctorss = doctorss.map(function(doc,index2){
					//处理上午
					let ams = doc['am'];
					let new_ams = [];
					for(let i = 1;i<8;i++){
						let has = false;
						let am;
						for(let item of ams){
							if(item['week'] == i || (i == 7 && item['week'] == 0)){
								has = true;
								am = item;
								break;
							}
						}
						if(has == true){
							new_ams.push({
								id:am['id'],
								sch_id:am['sch_id'],
								num:am['total']
							})
						}else{
							new_ams.push({
								id:0,
								num:0
							})
						}
					}
					doc['new_ams'] = new_ams;
					//处理下午
					let pms = doc['pm'];
					let new_pms = [];
					for(let i = 1;i < 8;i++){
						let has = false;
						let am;
						for(let item of pms){
							if(item['week'] == i || (i == 7 && item['week'] == 0)){
								has = true;
								am = item;
								break;
							}
						}
						if(has == true){
							new_pms.push({
								id:am['id'],
								sch_id:am['sch_id'],
								num:am['total']
							})
						}else{
							new_pms.push({
								id:0,
								num:0
							})
						}
					}
					doc['new_pms'] = new_pms;
					return doc;
				});
				data['doctors'] = doctorss;
				return data;
			});
		    that.datas = datas;
			console.info(1111)
			console.info(datas)
		}).catch((res) => {
		    this.$Message.error(res.msg);
		});
	},
    // 头部tab
    getHeader(index) {
		
    },
    // 表单
    getFrom() {
      
    },
    async getAllData() {
		
    },
    // 选择
    changeTab(e) {
		this.currentIndex = e;
	  console.info(e);
    },
  },
};
</script>

<style scoped lang="stylus">
.ivu-tabs {
  margin-bottom: 18px;
}

.fromBox {
  min-height: 600px;
}
.header{
	display: flex
	flex-direction: row;
	justify-content:space-between;
}
.header .left{
	
}
.header .left .button{
	margin-right: 15px;
	width:80px;
}
.header .left .select{
	width: 200px;
}
.header .right{
	
}
.head{
	// font-weight: bold;
	font-size: 18px;
	text-align: center
	padding: 20px 0px;
}
.container{
	display: flex;
	flex-direction: column;
}
table{
	border: 1px solid #f0f2f4;
	border-collapse: collapse;
}
table thead tr td{
	height:40px;
	background-color: #f7f7f7;
	padding: 0px 10px;
	font-weight: bold;
}
table tbody tr td{
	border: 1px solid rgb(233,233,233);
	border-collapse: collapse;
	text-align: center;
	width: 11%;
}
table .head{
	height: 73px;
	font-size: 14px;
}
table tbody tr{
	height: 40px;
}
.hand{
	cursor: pointer;
}
.hand .week_name{
	color: #2d8cf0;
}
.hand .week_day{
	color: #2d8cf0;
}
.hand-no{
	background-color: #f0f2f5;
}
.week{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0px 15px;
}
.week .left{
	display: flex;
	flex-direction: column;
}
.week .right{
	display: flex;
	flex-direction: row;
}
.week .right .add{
	display: inline-block;
	width: 15px;
	height:15px;
	border-radius: 7.5px;
	border: 1px solid #2d8cf0;
	line-height: 10px;
	color: #2d8cf0;
}
</style>
